<template>
  <div class="wrapper-container" style="display: flex; flex-direction: column">
    <div class="search-container" style="margin:0">
      <div class="search-container-left">
        <div class="search-container-item">
          <span>学期：</span>
          <el-select
            v-model="trem"
            style="width: 120px"
            size="mini"
            placeholder="请选择"
            clearable=""
            @change="handleXq"
          >
            <el-option
              v-for="(item,index) in xqList"
              :key="index"
              :label="item.xqmc"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>教研室：</span>
          <el-select
            v-model="className"
            style="width: 120px"
            size="mini"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="(item,index) in classList"
              :key="index"
              :label="item.xqmc"
              :value="item.xqmc"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>教员：</span>
          <el-input
            style="width: 120px"
            size="mini"
            placeholder="请输入教员名称"
            v-model="teacherName"
            clearable
          ></el-input>
        </div>
        <!-- <div class="search-container-item">
          <span>教员：</span>
          <el-select
            v-model="trem"
            style="width: 90px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="(item,index) in xqList"
              :key="index"
              :label="item.xqmc"
              :value="item.xqmc"
            >
            </el-option>
          </el-select>
        </div> -->
        <!-- <div
          class="search-container-item"
          v-show="this.record !== 3 && this.record !== 4"
        >
          <span>月份：</span>
          <el-select
            v-model="yuefen"
            style="width: 88px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in yfList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div> -->
        <div
          class="search-container-item"

          v-show="this.record === 1 "
        >
          <span v-show="this.record === 1">督导专家：</span>
          <el-input
            v-model="tckr"
            placeholder=""
            size="mini"
            style="width: 120px; height: 24px"
          ></el-input>
        </div>
        <div class="search-button" v-show="this.record !== 4" style="margin:2px 0 0 0">
          <img src="../../../assets/assessment/icon-search.png" alt=""/>
          <span @click="special">查询</span>
        </div>
      </div>
      <div class="search-container-right" style="margin-left: 30px">
        <div
          class="statistical-button"
          :class="isactive(index)"
          v-for="(item, index) in supervisionlist"
          :key="index"
        >
          <span @click="choiceLink(index)">{{ item.name }}</span>
         
        </div>
          <div class="search-button" style="width:140px;background: rgb(241, 255, 248);border: 1px solid rgb(2, 200, 108);">
         
          <span @click="fxtj" style="color: rgb(2, 200, 108);">按督导专家分析</span>
        </div>
      </div >
    </div>
    <!--    系督导查看-->
 
    <!--    按教员统计-->
    <statistical v-show="this.record === 0" :supqueryavgprops="supqueryavgdate"></statistical>
    <!-- 督导专家分析-->
    <supervisingExperts v-show="this.record === 1" :spequery="spequery"></supervisingExperts>
    <permissions v-show="this.record === 3"></permissions>
    <viewRoles v-show="this.record === 4"></viewRoles>
    <div class="bottom-block" v-show="this.record === 1 || this.record === 0">
      <div class="text">授课教员名字后加“*”为课程负责人</div>
    </div>

<!--    <div class="btn">-->
<!--      <el-button-->
<!--        native-type="submit"-->
<!--        size="medium "-->
<!--        type="warning"-->
<!--        class="submit"-->
<!--        v-show="this.record === 3"-->
<!--        @click="choiceLink(4)"-->
<!--      >授权-->
<!--      </el-button-->
<!--      >-->
<!--    </div>-->
  </div>
</template>

<script>
import { reqGetXqList,getClass} from "@/api/course/courses";
import supervision from "@/views/teacher/SupervisionTeam/supervision";
import statistical from "@/views/teacher/SupervisionTeam/statistical";
import supervisingExperts from "@/views/teacher/SupervisionTeam/supervisingExperts";
import permissions from "@/views/teacher/SupervisionTeam/permissions";
import viewRoles from "@/views/teacher/SupervisionTeam/viewRoles";
import {spequerySelect, supquery, supqueryavg, spequery} from "@/api/teacher/supervision";

export default {
  components: {
    supervision,
    statistical,
    supervisingExperts,
    viewRoles,
    permissions,

  },
  name: "supervisonMain",
  data() {
    return {
      className:'',
      teacherName:'',
      name: '',
      tremid: '',
      trem: '',
      //按督导专家分析
      spequery: '',
      //按教员统计
      supqueryavgdate: '',
      //系督导结果查看
      supquery: '',
      tckr:"",
      xqList: [],
      // yuefen: "01月",
      // yfList: [
      //   {
      //     value: "01月",
      //     label: "01月",
      //   },
      //   {
      //     value: "02月",
      //     label: "02月",
      //   },
      //   {
      //     value: "03月",
      //     label: "03月",
      //   },
      //   {
      //     value: "04月",
      //     label: "04月",
      //   },
      //   {
      //     value: "05月",
      //     label: "05月",
      //   },
      //   {
      //     value: "06月",
      //     label: "06月",
      //   },
      //   {
      //     value: "07月",
      //     label: "07月",
      //   },
      //   {
      //     value: "08月",
      //     label: "08月",
      //   },
      //   {
      //     value: "09月",
      //     label: "09月",
      //   },
      //   {
      //     value: "10月",
      //     label: "10月",
      //   },
      //   {
      //     value: "11月",
      //     label: "11月",
      //   },
      //   {
      //     value: "12月",
      //     label: "12月",
      //   }
      // ],
      record: 0,
      supervisionlist: [
     
        {
          url: "/teacher/SupervisionTeam/statistical",
          name: "按教员统计",
          class: "",
        },
      
     
      ],
      classList:[],

    };
  },

  mounted() {
    this.getXqList()
    // this.special()
  },
  methods: {
    handleXq(index){
      this.tremid = index
    },
    //教研室下拉框
    async getclassList() {
      const result = await getClass();
      if (result.data.code == 200) {
        this.classList = result.data.data;
        this.className = result.data.data.length > 0 ? result.data.data[0].mc : '';
      }
    },
    //学期下拉框
    async getXqList() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.xqList = result.data.data;
        this.trem = result.data.data.length > 0 ? result.data.data[0].xqmc : '';
        this.tremid = result.data.data.length > 0 ? result.data.data[0].id : '';
        this.getclassList()
        this.special()
      }
    },
    fxtj(){
      this.$router.push({
        path: "/teacher/SupervisionTeam/supervisingExperts",
      });
    },
    special() {
      let obj = {
        //教研室名ID
        tremid:this.tremid,
        classroom: this.className,
        name: this.teacherName,
        // yuefen: this.yuefen,
        // tckr:this.tckr
      }
      return new Promise(() => {
        //按督导信息分析
        spequery(obj).then(res => {
          this.spequery = res.data.data
          console.log("====按督导专家分析====", this.spequery);
        });
      
        //系督导查看
        supquery(obj).then(res => {
          this.supquery = res.data.data
          console.log("====系督导查看====", this.supquery);
        });
        //按教员统计
        spequerySelect(obj).then(res => {
          this.supqueryavgdate = res.data.data
          console.log("====按教员统计====", this.supqueryavgdate);
        });


      })
    },


    choiceLink(index) {
      this.record = index;
    },
    isactive(index) {
      let record = this.record;
      if (record === 4) {
        record = 3;
      }
      if (index === record) {
        return "active";
      }
    },
  },
  computed: {}, //计算属性
};
</script>


<style lang="less" scoped>
@import "../../../styles/supervision.less";

/deep/ .table-container {
  margin-top: 30px;



  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.wrapper-container .search-container .statistical-button {
  background: #f1fff8;
  border: 1px solid #02c86c;
  color: #02c86c;
  opacity: 1;
}

.wrapper-container .search-container .active {
  background: #15cc78;
  color: #f1fff8;
}

.btn {
  margin-top: 271px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 271px;

  .submit {
    width: 84px;
    height: 27px;
    line-height: 8px;
  }
}
</style>
